<!-- 管理组织 -->
<template>
    <div>
        <div style="display: flex;align-items: center;margin-bottom: 4%;">
            <div>
                组织名称：
            </div>
            <div style="width: 30%;margin-right: 2%;">
                <el-input v-model="companyName" placeholder="请输入组织名称"></el-input>
            </div>
            <el-button type="primary"> 查询</el-button>
            <el-button> 清空</el-button>
        </div>
        <Table ref="table" :tableData="tableData" :columns="columns" :operationColumn="operationColumn"
            :buttons="buttons" :pagination="pagination" @page-change="handlePageChange" @size-change="handleSizeChange"
            @clickRow="clickRow" />

    </div>
</template>
<script>
import Table from "@/components/Table.vue"; // 引入表格组件
import API from "@/api/api.js";
export default {
    components: {
        Table, // 注册表格组件
    },
    data() {
        return {
            companyName: '',//组织名称
            // 表格行数据列表
            tableData: [
                { companyName: { data: '组织名称1', templateStr: `<div > 你好</div>` }, },
            ],
            //表头
            columns: [
                { label: '组织名称', prop: 'companyName', width: 'auto' }
            ],
            // 操作列按钮：直接传入方法比父子监听更方便
            operationColumn: {
                width: 'auto',
                operationButtons: [
                    { label: '查看员工', type: 'primary', action: this.deleteRow, plain: true, },
                    // { label: '编辑', type: 'primary', action: this.editRow, plain: true, },
                    // { label: '删除', type: 'danger', action: this.deleteRow, plain: true, }
                ],
            },
            // 底部按钮：直接传入方法比父子监听更方便
            buttons: [
                // { label: '切换第二第三行', action: this.toggleSelectionRows },
                // { label: '取消选择', action: this.clearSelection }
            ],
            // 分页
            pagination: {
                currentPage: 1, // 当前页
                pageSize: 5,    // 每页显示的条数（修改为5）
                total: 0        // 总记录数：数据库能拿到的最多记录数
            }
        };
    },
    mounted() {
        //初始化，网络请求第一页数据：请求5条
        // this.tableData = [
        //     { companyName: { data: '组织名称1', templateStr: `<div > 你好1</div>` }, },
        // ]  
        API.queryCompanyAndDepartPage().then(res => {
            console.log('查询组织架构数据', res)
            this.tableData = res.map((item, index) => {
                return {
                    ...item,
                    companyName: {
                        data: item.companyName,
                        templateStr: `<div style="text-align:left;cursor: pointer;">▷ &nbsp;${item.companyName}</div>`,
                        clicked: false,//还没有点击
                        keyName: 'companyName'
                    },
                }
            })
            //更新总条数
            this.pagination.total = res.length
        })
    },
    methods: {
        editRow(row) {
            console.log('编辑行', row);
        },
        deleteRow(row) {
            console.log('删除行', row);
        },
        //切换选中的行
        toggleSelectionRows() {
            //切换指定的几行的选中状态
            this.$refs.table.toggleSelection([this.tableData[1], this.tableData[2]]);

        },
        //取消所有的选中状态
        clearSelection() {
            this.$refs.table.toggleSelection();//传入行数组是所有的行取消选中状态，传入行数组是取消指定的几行选中状态
        },
        handlePageChange(page) {
            console.log('分页改变:', page);
            // 更新当前页码
            this.pagination.currentPage = page;
            //网络请求指定的页的数据：传入指定的第几页pagination.currentPage和每页要拿多少条数据 pagination.pageSize
            //然后重新赋值给表格数据：根据当前页码来网络请求指定的几条数
            // if (this.pagination.currentPage == 1) {
            //     this.tableData = [
            //         { companyName: '组织名称1', templateStr: `<div> 你好</div>` },]
            // } else if (this.pagination.currentPage == 2) {
            //     this.tableData = [
            //         { companyName: '组织名称2', templateStr: `<div> 你好2</div>` },]
            // } else if (this.pagination.currentPage == 3) {
            //     this.tableData = [
            //         { companyName: '组织名称3', templateStr: `<div> 你好3</div>` },]
            // }
        },
        //用户点击了分页的下拉框：父亲应该修改每次的请求条数了
        handleSizeChange(size) {
            console.log('每页显示条数变化:', size);
            // 更新每页条数
            this.pagination.pageSize = size;
        },
        //点击表格行：
        clickRow(rowIndex, row, keyName, data) {
            console.log(rowIndex, row, keyName, data);
            // this.tableData.map((item, index) => {
            //     if (keyName == 'companyName' && index == rowIndex && !item.companyName.clicked) {
            //         console.log('item:', item);

            //         item.companyName.templateStr = `<div style="text-align:left;cursor: pointer;">▽ &nbsp;${item.companyName.data}</div>`
            //         item.companyName.clicked = true
            //     } else if (keyName == 'companyName' && index == rowIndex && item.companyName.clicked) {
            //         console.log('item:', item);

            //         item.companyName.templateStr = `<div style="text-align:left;cursor: pointer;">▷ &nbsp; ${item.companyName.data}</div>`
            //         item.companyName.clicked = false
            //     }
            // })
        }
    }
};
</script>

<style scoped>
/* 父组件的样式 */
</style>
